<template>
  <div>
    <div>
      <el-divider>工作页</el-divider>
    </div>
    <el-table ref="tableRef" v-loading="loading" :data="dataSource" border highlight-current-row :height="autoHeight" @row-click="handleRowClick" @select="selectSingle" @select-all="selectAll" @selection-change="selectAll" >
<!--      <el-table-column type="selection" label="选择" width="50" align="center" />-->
      <el-table-column label="工作页sheet名称" prop="sheetName" align="center"></el-table-column>
      <el-table-column label="表头结束行" prop="columnRow" align="center">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row[scope.column.property]" style="width: 100%;" controls-position="right" placeholder="工作页内表头结束行"></el-input-number>
        </template>
      </el-table-column>
    </el-table>

    <div class="lab-table-page">
      <div style="display: inline-flex">
        <el-pagination
            :disabled="loading"
            :current-page="pageInfo.page"
            :page-sizes="[5, 10, 15, 20, 50, 100]"
            :page-size="pageInfo.pageSize"
            layout="total, prev, pager, next"
            :total="pageInfo.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
        <el-button-group style="padding: 2px 5px">
          <el-button icon="el-icon-refresh" title="刷新" :disabled="loading" @click="loadSource([])" />
        </el-button-group>
      </div>
    </div>
  </div>
</template>

<script>
import IdeaTable from "@/mixins/IdeaTable";
import CodeEditor from "@/components/codeEditor/CodeEditor";

export default {
  name: "ExcelSheetTable",
  components: {CodeEditor},
  mixins: [ IdeaTable],
  inject: {
    excelTemplate: {
      from: 'excelTemplate',
      default: function () {
        return { sheets: [], excelId: '0' }
      }
    }
  },
  computed: {
    autoHeight(){
      return `calc(100vh - 367px)`
    }
  },
  created() {
    this.queryUrl = 'excelSheet/queryPage'
    this.saveUrl = 'excelSheet/save'
    this.removeUrl = 'excelSheet/delete/'
    this.rowKey = 'sheetId'
    this.tableRef = 'tableRef'
    this.pageInfo.pageSize = 20
    this.addFilter({ field: 'excelId',op: '=',value: this.excelTemplate.excelId})
    this.pageInfo.sorts = [{field: 'sheetIndex',asc:true}]
    this.loadSource()
  },
  methods: {
    loadComplate() {
      const { sheets } = this.excelTemplate
      sheets.splice(0, sheets.length)
      this.dataSource.forEach(item => {
        sheets.push(item)
      })
    }
  }
}
</script>

<style scoped>

</style>
